<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 头部输入框 -->
      <Header :addTodo="addTodo" />
      <!-- 中间代办列表 -->
      <List :todos="todos" :updateTodo="updateTodo" :deleteTodo="deleteTodo" />
      <!-- 页脚 -->
      <Footer
        :todos="todos"
        :completedTodos="completedTodos"
        :checkAll="checkAll"
        :checkAllTodos="checkAllTodos"
        :deleteAllCompletedTodo="deleteAllCompletedTodo"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";
import { Todo } from "./types/Todo";
import { setTodos, getTodos } from "./utils/localStorage";

export default defineComponent({
  name: "App",
  components: {
    Header,
    List,
    Footer,
  },
  setup() {
    // 定义待办列表
    // const state = reactive<{ todos: Todo[] }>({
    //   todos: [
    //     { id: 1, title: "待办事项1", isCompleted: false },
    //     { id: 2, title: "待办事项2", isCompleted: true },
    //     { id: 3, title: "待办事项3", isCompleted: false },
    //   ],
    // });
    const state = reactive<{ todos: Todo[] }>({ todos: [] });

    onMounted(() => {
      console.log('页面加载 ，，，');
      setTimeout(() => {
        state.todos = getTodos();
      }, 100);
    });

    // 添加待办事项
    const addTodo = (item: Todo) => {
      // 将最新的添加的待办事项放在数组的头部位置
      state.todos.unshift(item);
    };

    // 更新待办事项
    const updateTodo = (id: number, isCompleted: boolean) => {
      state.todos.forEach((item: Todo) => {
        if (item.id === id) {
          item.isCompleted = isCompleted;
        }
      });
    };

    // 删除待办事项
    const deleteTodo = (id: number) => {
      state.todos = state.todos.filter((item: Todo) => item.id !== id);
    };

    // 计算已完成的待办事项数
    const completedTodos = computed(() => {
      if(state.todos.length <= 0) return 0
      return state.todos.reduce(
        (pre: number, item: Todo) => pre + (item.isCompleted ? 1 : 0),
        0
      );
    });

    // 计算待办全部长度
    const checkAll = computed(() => {
      return state.todos.length;
    });

    // 清除已完成任务待办
    const deleteAllCompletedTodo = () => {
      state.todos = state.todos.filter((item: Todo) => !item.isCompleted);
    };

    // 全选 or 全不选
    const checkAllTodos = (flag: boolean) => {
      state.todos.forEach((item: Todo) => {
        item.isCompleted = flag;
      });
    };

    // 监视属性
    // watch(()=> state.todos, val=> {
    //     //  console.log('监视 val = ', val);
    //     setTodos(val)
    // }, {deep: true})

    watch(() => state.todos, setTodos, { deep: true });

    return {
      ...toRefs(state),
      addTodo,
      updateTodo,
      deleteTodo,
      completedTodos,
      checkAll,
      checkAllTodos,
      deleteAllCompletedTodo,
    };
  },
});
</script>

<style scoped>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
